import React from 'react';
import UserList from './list';
import CommonListsIndex from '../../../../components/CommonLists/index';
import { Tooltip, Row, Col } from 'antd';
import FilterTool from '../../../../components/FilterTool';

class SupplierBillIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'supplierBill';
    this.listsComponent = UserList;
    this.model_width = 400;
    this.typeLabelAll = [
      { type: 0, value: '免费' },
      { type: 1, value: '单次计费 ' },
      { type: 2, value: '包年' },
      { type: 3, value: '包次' },
      { type: 4, value: '梯度计算' }
    ]
    this.initQueryPanigation = {
      // 初始化分页参数
      page: 1,
      size: 10,
    };
    this.queryPanigation = this.initQueryPanigation; //分页参数
  }
  componentDidMount() {
    // this.freshQueryList();
  }

  // 分页回调
  onChangePagination = (pageNumber, type = 'current_page') => {
    const t = type === 'current_page' ? 'page' : 'size'
    this.updatePanagaition && this.updatePanagaition({
      [t]: pageNumber,
    });
    this.freshQueryList();
  };

  refreshFilter = (params, type) => {
    this.queryParams = params;
    if (params.startTime) params.startTime = params.startTime.split(' ')[0] + '-' + params.startTime.split(' ')[1]
    if (params.endTime) params.endTime = params.endTime.split(' ')[0] + '-' + params.endTime.split(' ')[1]
    if (type === false) return
    this.freshQueryList(params);
  };

  getColumns = () => {
    return [
      {
        title: '供应商',
        key: 'supplierName',
        dataIndex: 'supplierName',
        ellipsis: true,
        width: 150,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '数据源名称',
        key: 'interfaceName',
        dataIndex: 'interfaceName',
        ellipsis: true,
        width: 150,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: '计费金额',
        key: 'amount',
        dataIndex: 'amount',
        ellipsis: true,
        width: 150,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        }
      },
      {
        title: (
          <>
            {this.getFilterTitle('计费方式', this.typeLabelAll, 'type', this.refreshTableFilter, [
              'type',
              'value'
            ])}
          </>
        ),
        dataIndex: 'typeLabel',
        key: 'typeLabel',
        ellipsis: true
      },
      {
        title: '调用总次数',
        dataIndex: 'callCount',
        key: 'callCount',
        ellipsis: true,
      },
      {
        title: '调用成功数',
        dataIndex: 'successCount',
        key: 'successCount',
        ellipsis: true,
      },
    ];
  };

  render() {
    const { records, current, total, size } = this.state;
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'rangepicker',
        key: 'start',
        name: ['startTime', 'endTime'],
        placeholder: ['计费周期开始', '计费周期结束'],
        disabledDate: (current) => false,
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入供应商|数据源进行搜索'
      }
    ];
    return (
      <div>
        <Row type='flex' justify='end' align='middle'>
          <Col span={24}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              refresh={this.resetList}
              justify='end'
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            list={records}
            currentPage={current}
            totalCount={total}
            pageSize={size}
            rowKey={(record, index) => index}
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}

export default SupplierBillIndex;
